<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="/KFCOnline/show/css/bootstrap.min.css" rel="stylesheet">
      <style>
          
          body,div,a,ul,li{
            padding: 0px;
              margin: 0px;
              
          }
          li{
            list-style: none;
          }
          body{
              font-size: 12px;
              font-family: "微软雅黑",sans-serif;
              color: #505050;
              padding: 30px;
              
          }
          
          #left_menu{
            width: 200px; 
            min-height: 440px;
            border: 1px solid #bbb;
            padding-left: 4px;
            position: relative;
          }
          #left_menu_main{
              min-height: 400px; 
          }
          #left_menu p{
            color: #aaa; 
          }
          
          #promotion h4{
            background: url(/KFCOnline/images/menu_txt_1.png) no-repeat;
            height: 29px;
          }
          #promotion_menu_first{
            background: url(/KFCOnline/images/iclasscn2_2015_12_03_13_38_15.jpg) no-repeat;
            height: 29px;
          }
           .menu_item{
               font-size: 1.1em;
               border-bottom: 1px solid #f0dfd4;
               line-height: 1.9em;
               background: url(/KFCOnline/images/left_icon1.png) no-repeat 180px center;
           }
          h5{
            position: relative;
          }
          h5 img{
              position: absolute;
              right: 20px;
              bottom: 10px;
          }
          
          #breakfast h5{
            background: url(/KFCOnline/images/menu_txt_2.png) no-repeat;
            height: 29px;
          }
          
          #lunch h5{
            background: url(/KFCOnline/images/menu_txt_3.png) no-repeat;
            height: 29px;
          }
          
          #dinner h5{
            background: url(/KFCOnline/images/menu_txt_4.png) no-repeat;
              height: 29px;
          }
          
          
          
          
          
          
          
           #main_menu{
            width:564px;    
          }
          .main_tip{
            color: #ff0000;
            font-weight: bold;
            font-size: 1.05em;
          }
          
          #main_menu li{
              width: 180px;
              margin: 0px 8px 8px 0px;
              padding-bottom: 6px;
              border: 1px solid #bbb;
              background-color: #f7f6f6;
              font-size: 1.08em;
              position: relative;
              cursor: pointer;
              float: left;
          }
          #main_menu li img{
            width: 100%;   
          }
          #main_menu li p{
            line-height: 2em;
            margin: 7px 0px 7px 7px;   
          }
          .main_changer{
            position: absolute;
            right: 5px;
          }
          
          body{
              font-size: 12px;
              font-family: "微软雅黑",sans-serif;
              color: #505050;
              padding: 30px;  
          }
          
          
          
          
          #left_menu,#main_menu{
            float: left;
          }
          #left_menu{
            margin-right: 12px;   
          }
          
          
      </style>
          
  </head>
  <body>
      <div id="left_menu">
        <div id="left_menu_main">
          <ul>
            <li id="promotion">
                <h4></h4>
                <ul id="promotion_menu">
                    <li id="promotion_menu_first"></li>
                    <li class="menu_item">新品优惠</li>
                </ul>
            </li>
            
            <li id="breakfast">
                <h5>
                    <img src="/KFCOnline/images/plus.png">
                </h5>
                <ul>
                    <li class="menu_item">团享餐</li>
                    <li class="menu_item">超值多人餐</li>
                    <li class="menu_item">美味汉堡</li>
                </ul>
            </li>
            <li id="lunch">
                <h5><img src="/KFCOnline/images/minus_sign.png"></h5>
                <ul>
                    <li class="menu_item">团享餐</li>
                    <li class="menu_item">超值多人餐</li>
                    <li class="menu_item">美味汉堡</li>
                </ul>
              </li>
            <li id="dinner">
                <h5><img src="/KFCOnline/images/plus.png"></h5>
                <ul>
                    <li class="menu_item">团享餐</li>
                    <li class="menu_item">超值多人餐</li>
                    <li class="menu_item">美味汉堡</li>
                    <li class="menu_item">团享餐</li>
                    <li class="menu_item">超值多人餐</li>
                    <li class="menu_item">美味汉堡</li>
                </ul>
              </li>
            </ul>
        </div>
          <p>
          注：早餐、夜宵仅限部分肯德基宅急送送餐区域供应。肯德基宅急送实行专属菜单及价格，不同城市的送餐菜单有所不同。不同时段产品品项及价格有所不同。
          </p>
      </div>
      
      
      
      
<!--主菜单部分 -->
      
    
        <div id="main_menu" class="clearfix">
        <p class="main_tip">热门推荐：
<a>外带全家桶</a> <a>圣诞新年派对套餐</a></p>
          <ul>
            <li>
                <div><img src="/KFCOnline/images/73_24626.jpg"></div>
            <p class="pro_name">外带全家桶</p>
            <p style="color:#6b2d38">
            <span class="main_price">86.0/份</span>
            <span class="main_changer">
            <button class="btn btn-default btn-xs minus">-</button>
            <input style="width:30px;text-align:center;font-size:5px;line-height: 1.3em;" type="text" value="1">    
            <button class="btn btn-default btn-xs plus">+</button> 
            </span>
            </p>
            <p><button class="btn btn-default btn-sm disabled center-block">即将售卖</button></p>
            </li>
            
            </ul>
        </div>
    
    

    <script src="/KFCOnline/show/js/jquery-1.11.1.min.js"></script>
    <script src="/KFCOnline/show/js/bootstrap.min.js"></script>
      <script>
    
          
          
          
          
      //划过菜单时的颜色变化 
       $(".menu_item").on("mouseover",function(){
        $(this).css("background-color","red").css("color","white");
       
       }).on("mouseout",function(){
        $(this).css("background-color","white").css("color","black");
       });
        
        //初始化早午晚餐的状态信息
        $("li h5").each(function(index){
            if(index!=1){
                $(this).data("stat",false).next().hide();
            }
            else{
                $(this).data("stat",true);  
            }
        });
          
        //改变箭头的状态以及菜单的出现与消失  
        $("li h5").click(function(){
            var stat=$(this).data("stat");
            $(this).data("stat",!stat);
            if(!stat){
                $(this).children().first().attr("src","/KFCOnline/images/minus_sign.png");   
            }
            else{
                $(this).children().first().attr("src","/KFCOnline/images/plus.png"); 
            }
            
           $(this).next("ul").toggle(100);
            
        });
        
          
    //主菜单部分的脚本      
          
    var imgs=["73_24626.jpg","73_24627.jpg","73_24628.jpg","73_24629.jpg","73_24730.jpg","73_24731.jpg","47_18416.jpg","47_18457.jpg","86_28332.jpg","105_34826.jpg"];
          var pro_names=["牛肉汉堡","猪肉蛋堡","猪肉腿堡","香嫩烤肉堡套餐+奶茶","香嫩烤肉堡套餐+可乐","香嫩烤肉堡套餐+卡布","喱哩土豆泥","甜玉米","清凉小菜","全鸡套餐"];
        
        function reset(){
             var m=$("#main_menu ul li:first").clone(true);
            $("#main_menu ul").empty();
            return m;
        }
          
          
          //生成餐品
        function createOneMenu(target){
            var img_num=imgs.length;
            var scope=Math.floor(Math.random()*img_num);
            //var m=$("#main_menu ul li:first").clone(true);
            var m=target.clone(true);
            m.find("img").attr("src","/KFCOnline/images/"+imgs[scope]);
            m.find(".pro_name").text(pro_names[scope]);
            m.find(".main_price").text(scope*8+".0/份");
            if(scope%3!=0)
            m.find(".disabled").removeClass("disabled").removeClass("btn-default").addClass("btn-danger").text("订 购");
            
            $("#main_menu ul").append(m);
        }
        
          
          
          
        $(".plus").on("click",function(){
            var numIpt=$(this).prev();
            var num=numIpt.val();
            num++;
            numIpt.val(num.toString());
        });
        $(".minus").on("click",function(){
            var numIpt=$(this).next();
            var num=numIpt.val();
            if(num>0)
            num--;
            numIpt.val(num.toString());
        });
          
        
          
        //随机生成餐品  
        $(".main_tip").on("click",function(){
            createOneMenu();
        });
          
        //点击menu_item，产生主菜单
        $(".menu_item").on("click",function(){
            var max=Math.ceil(Math.random()*8);
            var m=reset();
            for(var i=0;i<max;i++){
                createOneMenu(m);   
            }
        });  
          
      
      </script>
  </body>
</html>

